<template>
  <div>
    <div>
      <div class="test">
        <el-form
          ref="forget"
          :model="forget"
          label-width="100px"
          :rules="rules"
          size="100px"
          :label-position="labelPosition"
        >
          <el-form-item label="请输入新密码" prop="newpw">
            <el-input type="password" v-model="forget.newpw" :clearable="true"></el-input>
          </el-form-item>
          <el-form-item label="请输入重复的新密码" prop="password">
            <el-input type="password" v-model="forget.password" :clearable="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer showbuttfor">
        <el-button @click="cancelchange">取 消</el-button>
        <el-button type="primary" @click="confirmchange('forget')">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let checkpw = (rule, value, callback) => {
      if (value !== this.forget.newpw) {
        callback(new Error("与新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      labelPosition: "top",
      forget: {
        newpw: "",
        password: "",
        uname: ""
      },
      rules: {
        newpw: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            pattern: "^.{5,10}$",
            message: "密码的长度为5到10位",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请确认新密码", trigger: "blur" },
          { validator: checkpw, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    confirmchange(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //前端表单验证
          this.axios
            .post("forget/resetpw", this.forget)
            .then(res => {
              if (res.data == "success-reset") {
                  //步骤前进
                sessionStorage.setItem(
                  "active",
                  parseInt(sessionStorage.getItem("active")) + 1
                );
                // //刷新
                // window.location.reload();
                //弹出框，确认修改成功，跳转登录
                 this.$alert("密码重置成功！即将返回登录！", {
                  confirmButtonText: "确定",
                  callback:action=>{
                      this.$router.push("/")
                  }
                });

                
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          //验证错误信息
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelchange() {
      this.$router.push({
        //传参用router，接参用route
        path: "/"
      });
    }
  },
  created() {
    this.forget.uname = this.$route.query.forgetid;
  },
  components: {}
};
</script>

<style>
.mainword {
  font-size: 20px;
  position: relative;
  left: -210px;
}
.test {
  position: relative;
  top: 50px;
  /* border: solid 1px #cf1111; */
}

.showbuttfor {
  text-align: center;
  position: relative;
  top: 100px;
  /* border: solid 1px #cf1111; */
}
</style>
